<template>
	<view>
		<view class="page_title">
			<nav-back></nav-back>
			<view class="page_name">活动详情</view>
			<view class="blank"></view>
		</view>

		<scroll-view scroll-y class="scroll">
			<view class="img">
				<image :src="activityInfo.image2" mode="" />
			</view>
			<view class="banxin">
				<view class="box">
					<view class="title">{{activityInfo.name}}</view>
					<view class="info">报名费：会员免费 非会员66元/人</view>
				</view>
				<view class="box">
					<view class="title2">活动信息</view>
					<view class="line">
						<image src="/static/img/time.png" mode="" />
						<text>时间</text>
						<!-- 2024年7月13日 15:00-17:00 -->
						<view class="info">{{activityInfo.activityTime}}</view>
					</view>
					<view class="line">
						<image src="/static/img/local.png" mode="" />
						<text>地点</text>
						<view class="info">{{activityInfo.address}}</view>
					</view>
					<view class="line">
						<image src="/static/img/person.png" mode="" />
						<text>人数</text>
						<view class="info">{{activityInfo.limitNum}}人以内 报满即止 男女比例1:1</view>
					</view>
				</view>
				<view class="box">
					<view class="contact">
						<view class="title3">快速获取活动进展、活动答疑</view>
						<view class="btn" @click="contact">联系红娘</view>
					</view>
				</view>
				<view class="box">
					<view class="title2">活动介绍</view>
					<view class="content">
						<rich-text :nodes="activityInfo.contents  || '暂无'" />
					</view>
				</view>
				<view class="box">
					<view class="title2">活动流程</view>
					<view class="content">
						<text>
							{{activityInfo.progress || '暂无'}}
						</text>
					</view>
				</view>
				<view class="box" v-if="activityList.length!=0">
					<view class="title2">其他活动</view>
					<view class="activity" v-for="item in activityList">
						<image :src="item.image1" mode="" />
						<view class="desc">
							<view class="title4">{{item.name}}</view>
							<view class="apply">
								已有{{item.manCount+item.womenCount}}人报名
								<view class="btn" :class="(item.manCount+item.womenCount)>= item.limitNum? 'full':''">
									{{(item.manCount+item.womenCount)>= item.limitNum? '已满额':'报名'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="utils">
			<view class="share" @click="handleShare">
				<image src="/static/img/share.png" mode="" />
				<view>分享</view>
			</view>
			<view class="btn" @click="handleApply(activityInfo.isPay)">
				{{activityInfo.isPay==1?'已报名':(activityInfo.isPay==0?'待支付':'我要报名') }}
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				activityId: '',
				activityInfo: {},
				activityList: [],
				isWxbrowser:true
			}
		},
		onLoad(option) {
			console.log(option, 'option');
			this.activityId = option.id
			this.initInfo()
			this.initActivity()
			let en = window.navigator.userAgent.toLowerCase()
			// 匹配en中是否含有MicroMessenger字符串
			if (en.match(/MicroMessenger/i) == 'micromessenger') {
				// alert("在微信",11111)
				this.isWxbrowser = true
			}
			if(en.match(/MicroMessenger/i) != 'micromessenger'){
				// alert("不在微信",2222)
				this.isWxbrowser = false
			}
		},
		methods: {
			initInfo() {
				let that = this
				request(`/activity/detail/${that.activityId}`).then((res) => {
					console.log(res.data.data, 'initInfo');
					that.activityInfo = res.data.data
				})
			},
			initActivity() {
				let that = this
				request(`/activity/list`).then((res) => {
					console.log(res.data.data, 'initActivity');
					that.activityList = res.data.data.filter((item) => {
						return item.id != this.activityId
					})
				})
			},
			handleShare() {
				console.log(this.activityId, 'handleShare');
				uni.navigateTo({
					url: `/pages/linkPage/activityPoster/activityPoster?id=${this.activityId}`
				})
			},
			contact() {
				console.log('contact');
				uni.navigateTo({
					url: '/pages/tabPage/matcher/matcher'
				})
			},
			handleApply(type) {
				let that = this
				console.log(type, 'handleApply');
				if (type == 1) {
					uni.showToast({
						title: '不可重复报名',
						icon: 'none',
						duration: 1000
					})
				} else if (type == 0) {
					request(`/activity/Wxpayment`, {
						method: 'PUT',
						data: {
							orderNumber: this.activityInfo.number
						}
					}).then((res) => {
						if (res.data.code == 1) {
							// let orderNumber = res.data.data.number
							console.log(res.data, 'res.data');
							uni.showToast({
								title: 报名成功,
								icon: 'none',
								duration: 1000
							})
							that.initInfo()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1000
							})
						}
					})
				} else {
					request(`/activity/submit`, {
						method: 'POST',
						data: {
							activityId: this.activityId
						}
					}).then((res) => {
						if (res.data.code == 1) {
							let orderNumber = res.data.data.number
							console.log(orderNumber, 'orderNumber');
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1000
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		line-height: 34rpx;
		color: rgba(51, 51, 51, 1);
	}

	.page_title {
		position: relative;
		z-index: 99;
	}

	.scroll {
		height: 85vh;
	}

	.img {
		margin-top: -10rpx;

		image {
			display: block;
			z-index: -1;
			width: 100vw;
			height: 488rpx;
		}
	}

	.banxin {
		margin-top: -50rpx;
	}

	.box {
		padding: 30rpx 50rpx;
		border-radius: 40rpx;
		margin-bottom: 30rpx;
		background-color: rgba(245, 245, 255, 1);

		.title {
			font-size: 36rpx;
			font-weight: 500;
			line-height: 52rpx;
		}

		.title2 {
			font-weight: 500;
			margin-bottom: 20rpx;
			line-height: 46rpx;
		}

		.info {
			font-size: 24rpx;
			color: rgba(107, 107, 255, 1);
			margin-top: 10rpx;
		}

		.content {
			font-size: 24rpx;
			// font-weight: 500;

			text {
				font-size: 24rpx;
				display: block;
				// margin-top: -40rpx;
			}
		}

		.contact {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title3 {
				font-size: 28rpx;
				font-weight: 500;
			}

			.btn {
				color: white;
				font-size: 24rpx;
				font-weight: 500;
				padding: 10rpx 20rpx;
				border-radius: 60rpx;
				background-color: rgba(156, 156, 255, 1);
			}
		}

		.line {
			display: flex;
			margin-top: 10rpx;
			font-weight: 500;
			align-items: center;

			text {
				font-size: 24rpx;
				margin-right: 15rpx;
			}

			image {
				width: 24rpx;
				height: 26rpx;
				margin: 10rpx;
			}
		}

		.activity {
			display: flex;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.desc {
				flex: 1;

				.title4 {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
				}
			}

			.apply {
				display: flex;
				font-size: 28rpx;
				margin-top: 10rpx;
				align-items: center;
				justify-content: space-between;
				color: rgba(156, 156, 255, 1);

				.btn {
					width: 140rpx;
					text-align: center;
					font-size: 24rpx;
					color: white;
					padding: 10rpx 0;
					border-radius: 60rpx;
					background-color: rgba(156, 156, 255, 1);
				}

				.full {
					background-color: rgba(166, 166, 166, 1);
				}
			}
		}
	}

	.utils {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		padding: 0 7.5vw;

		image {
			width: 60rpx;
			height: 60rpx;
		}

		.share {
			text-align: center;
			margin-right: 50rpx;
			view{
				color: rgba(156, 156, 255, 1);
				font-size: 24rpx;
			}
		}

		.btn {
			flex: 1;
			text-align: center;
			color: white;
			border-radius: 60rpx;
			line-height: 100rpx;
			background-color: rgba(156, 156, 255, 1);
			;
		}
	}
</style>